<style>
    body {
        background-color: #ffffff;
    }

    .xm-select-size {
        width: 200px;
        float: left;
    }
</style>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">剧场标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="剧场标题不能为空" placeholder="请输入剧场标题" value=""
                   class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">选择剧院</label>
        <div class="layui-input-inline">
            <div id="venue" class="xm-select-size"></div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">剧院介绍</label>
        <div class="layui-input-block">
            <textarea name="description" class="layui-textarea" placeholder="请输入剧院介绍"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/extends/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/extends/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/static/extends/'
    }).extend({
        xmSelect: 'xmSelect/xm-select'
    });
    let ue = UE.getEditor('remark');
    layui.use(['form', 'xmSelect', "upload", "element", 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            xmSelect = layui.xmSelect,
            upload = layui.upload,
            element = layui.element,
            laydate = layui.laydate;

        laydate.render({
            elem: '#start_time',
            type: 'datetime'
        })

        let uploadInst = upload.render({
            elem: '#btn_upload'
            , url: "{:url('upload/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_image').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#upload_content').html('<input type="hidden" name="thumb" value="' + res.data.url + '">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#upload_content');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('upload_press', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        let uploadInstThumb = upload.render({
            elem: '#btn_thumb'
            , url: "{:url('upload/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img_thumb').attr('src', result); //图片链接（base64）
                });

                element.progress('press_thumb', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#text_thumb').html('<input type="hidden" name="thumb_img" value="' + res.data.url + '">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#text_thumb');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInstThumb.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('press_thumb', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        let venue = xmSelect.render({
            el: '#venue',
            filterable: true,
            searchTips: '请选择剧院',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'venue',

        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            hadmin.http("{:url('save')}", data.field).then(res => {
                if (res.code == "{$result.normal}") {
                    hadmin.father_reload();
                }
            })

            return false;
        });
        hadmin.http("{:url('venue/getVenueByList')}").then(res => {
            if (res.code == "{$result.normal}") {
                venue.update({
                    data: res.data
                })
            }
        })

    });
</script>
</body>
</html>